import React, { Component } from 'react'
import {connect} from 'react-redux';
import { cat_action } from '../../../store/store';
class Shop extends Component {
    constructor(){
        super();
        this.state={
            acindex:0
        }
    }
    render() {
        return (
            <div className='shop'>
                <div className="left">
                    {this.props.list.length>0&&
                    this.props.list.map((item,index)=>{
                        return (
                                <div className={`div ${this.state.acindex===index?"active":''}`} key={index} onClick={()=>{this.setState({acindex:index})}}>
                                    {item.title}
                                </div>
                        )
                    })}
                </div>
                <div className="right">
                    <h4>{this.props.list[this.state.acindex].title}</h4>
                    {this.props.list[this.state.acindex].content.map((item)=>{
                        return (
                            <div className="shops" key={item.id}>
                            <div className="img">
                                <img src={item.pic} alt=""/>
                            </div>
                            <div className="txt">
                                <p className='wight'>{item.name}</p>
                                <p className="fei">{item.title}</p>
                                <p>￥<span>{item.money}</span>元</p>
                                <div className="divs" onClick={()=>{this.props.add(item)}}>
                                    +
                                </div>
                            </div>
                        </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            lis:state.catList
        }
    },
    (dispatch)=>{
        return {
            add:(item)=>{
                dispatch(cat_action(item))
            }
        }
    }
)(Shop)
